<script lang="ts" setup>
const props = defineProps({
  link: {
    type: String,
    default: '',
  },
  des: {
    type: String,
    default: '',
  },
  pic: {
    type: String,
    default: '',
  },
  cursor: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(['join', 'close']);

const handleClose = () => {
  emit('close');
}
</script>

<template>
  <div class="relative mx-auto w-600 rounded-6 bg-white pb-40 text-hex-292929 shadow-[0_0_16px_0_rgba(0,0,0,0.10)]">
    <img :data-src="props.pic" class="lozad block h-208 w-full object-cover">
    <p class="line-clamp-2 mt-40 px-40 text-center text-balance text-20 text-hex-575757 leading-30">{{ props.des }}</p>
    <a
      :href="props.link || 'javascript:void(0);'"
      :target="props.link ? '_blank' : ''"
      class="mx-auto mt-32 block h-56 w-230 rounded-6 bg-primary-1 text-center text-20 text-white font-medium leading-56"
      :class="[ props.cursor ? 'cursor-pointer' : 'cursor-default']"
    >
      {{ $t('common.communityCard.popup.view') }}
    </a>
    <div class="i-icons:close-fill absolute right-16 top-16 size-24 text-black opacity-20" :class="[ props.cursor ? 'cursor-pointer' : 'cursor-default']" @click="handleClose"></div>
  </div>
</template>

<style scoped lang="scss">
</style>
